<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>搜索</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/search.css"/>
</head>
<body>
	
	<header class="mui-bar mui-bar-nav header-top">
		<a href="javascript:history.go(-1)" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	
		<!--搜索框-->
		<form action="" method="get" id="search">
			<div class="mui-input-row mui-search">
				<input type="search" class="mui-input-clear" placeholder="请输入搜索关键字">
			</div>
		</form>
		
        <button class="mui-icon mui-pull-right" id="submit">搜索</button>
	</header>
	
	<div class="mui-content">
		
		<!--选项卡-->
		<div class="mui-segmented-control control">
		    <a class="mui-control-item mui-active" href="#">商品</a>
		    <a class="mui-control-item" href="#">商家</a>
		</div>
		<div class="mui-slider">
		  <div class="mui-slider-group">
		    <!--第一个内容区容器-->
		    <div class="mui-slider-item">
		    	<!--商品列表-->
		    	<article class='goods'>
		    		<div>
		    			<a href="goods_detail.html">
		    				<div><img src="img/1547826906a.jpg" alt="" /></div>
		    				<aside>
		    					<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜【雷猫】Sulwhasoo雪花秀 眼霜【雷猫】Sulwhasoo雪花秀 眼霜</h5>
		    					<p>￥585.00</p>
		    				</aside>
		    			</a>
		    		</div>
		    		<div>
		    			<a href="goods_detail.html">
		    				<div><img src="img/1547826906a.jpg" alt="" /></div>
		    				<aside>
		    					<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
		    					<p>￥585.00</p>
		    				</aside>
		    			</a>
		    		</div>
		    		<div>
		    			<a href="goods_detail.html">
		    				<div><img src="img/1547826906a.jpg" alt="" /></div>
		    				<aside>
		    					<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
		    					<p>￥585.00</p>
		    				</aside>
		    			</a>
		    		</div>
		    		<div>
		    			<a href="goods_detail.html">
		    				<div><img src="img/1547826906a.jpg" alt="" /></div>
		    				<aside>
		    					<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
		    					<p>￥585.00</p>
		    				</aside>
		    			</a>
		    		</div>
		    		<div>
		    			<a href="goods_detail.html">
		    				<div><img src="img/1547826906a.jpg" alt="" /></div>
		    				<aside>
		    					<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
		    					<p>￥585.00</p>
		    				</aside>
		    			</a>
		    		</div>
		    		<div>
		    			<a href="goods_detail.html">
		    				<div><img src="img/1547826906a.jpg" alt="" /></div>
		    				<aside>
		    					<h5 class="mui-ellipsis-2">【雷猫】Sulwhasoo雪花秀 眼霜</h5>
		    					<p>￥585.00</p>
		    				</aside>
		    			</a>
		    		</div>
		    	</article>
		    </div>
		    <!--第二个内容区-->
		    <div class="mui-slider-item">
		      <!--商家列表-->
		      <ul class="mui-table-view merchant">
		          <li class="mui-table-view-cell mui-media">
		              <a href="">
		                  <img class="mui-media-object mui-pull-left" src="img/ftzwo.jpg">
		                  <div class="mui-media-body">
		        				沃洋优品
		                      <p class="mui-ellipsis">16639521888</p>
		                  </div>
		              </a>
		          </li>
		          <li class="mui-table-view-cell mui-media">
		              <a href="">
		                  <img class="mui-media-object mui-pull-left" src="img/ftzwo.jpg">
		                  <div class="mui-media-body">
		        				沃洋优品
		                      <p class="mui-ellipsis">16639521888</p>
		                  </div>
		              </a>
		          </li>
		          <li class="mui-table-view-cell mui-media">
		              <a href="">
		                  <img class="mui-media-object mui-pull-left" src="img/ftzwo.jpg">
		                  <div class="mui-media-body">
		        				沃洋优品
		                      <p class="mui-ellipsis">16639521888</p>
		                  </div>
		              </a>
		          </li>
		      </ul>
		    </div>
		  </div>
		</div>
		
	</div>
	
	
	
    <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
		mui.init();
		$('#submit').click(()=>{
			$('#search').submit()
		})
		/*****	 点击切换页面	******/
		mui('.mui-segmented-control').on('tap','.mui-control-item',e=>{
			mui('.mui-slider').slider().gotoItem($(e.target).index())
		})
		/******	   监听slider	********/
		$('.mui-slider').on('slide',e=>{
			$('.mui-segmented-control .mui-control-item').removeClass('mui-active')
			$('.mui-segmented-control .mui-control-item').eq(e.detail.slideNumber).addClass('mui-active')
		})
    </script>
</body>
</html>
